<!-- 首页 -->
<template>
	<view class="main">
		<tab class='tab' :list='TabList' :active.sync='TabIndex'></tab>
		<view :class="['content','animated',{'fadeIn':show}]">
			<swiper class="swiper" :style="{'height':swiperHeight+'px'}" :current='TabIndex' @change='swiperChange'>		
				<swiper-item v-for="(item,index) of newsList" :key='index'>
					<scroll-view class="scroll" scroll-y show-scrollbar='false' style="height: 100%;" @scrolltolower='loadmore(index)'>
						<template v-if='item.list.length>0'>
							<block v-for="(items,indexs) in item.list" :key="indexs">
								<item :list='items' v-if="items.display" @delet='delet(index,indexs)'></item>
							</block>
							<!-- 上拉加载更多 -->
							<template >
								<view @tap='loadmore(index)'>
									<loadfooter :loadText='item.list.length<=1?"点击加载更多":loadText'></loadfooter>
								</view>
							</template>
						</template>
						<template v-else>
							<view class="nothing animated fadeIn">
								<image src="/static/nothing.png" mode="aspectFit"></image>
							</view>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>	
</template>

<script>
	import item from '@/components/index_list_item.vue'
	import tab from '@/components/tabbar.vue'
	import loadfooter from '@/components/loadfooter.vue'
	export default {
		
		data() {
			return {
				show:false,
				swiperHeight:null,
				loadText:'上拉加载更多',
				TabList:[
					{
						id:0,
						text:'关注',
						type:'guanzhu'
					},
					{
						id:1,
						text:'推荐',
						type:'tuijian'
					},
					{
						id:2,
						text:'热点',
						type:'redian'
					},
					{
						id:3,
						text:'体育',
						type:'tiyu'
					},
					{
						id:4,
						text:'财经',
						type:'caijin'
					},
					{
						id:5,
						text:'科技',
						type:'keji'
					}
				],
				TabIndex:0,
				newsList:[
					{
						index:0,
						list: [
							{
								userpic:'/static/demo/userpic/12.jpg',
								username:'名称',
								isguanzhu:true,
								title:'走出去，才发现你跟别人差的不是一点半点',
								type:'video', // img:图文，video:视频
								titlepic:'/static/demo/datapic/11.jpg',
								paynum:'20w',
								long:'2:47',
								infonum:{
									index:0,// 0:没操作，1:顶，2:踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10,
								display:true
							},
							{
								userpic:'/static/demo/userpic/12.jpg',
								username:'名称',
								isguanzhu:false,
								title:'走出去，才发现你跟别人差的不是一点半点',
								type:'video', // img:图文，video:视频
								titlepic:'/static/demo/datapic/11.jpg',
								paynum:'20w',
								long:'2:47',
								infonum:{
									index:1,// 0:没操作，1:顶，2:踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10,
								display:true
							},
							{
								userpic:'/static/demo/userpic/12.jpg',
								username:'名称',
								isguanzhu:false,
								title:'走出去，才发现你跟别人差的不是一点半点',
								type:'video', // img:图文，video:视频
								titlepic:'/static/demo/datapic/11.jpg',
								paynum:'20w',
								long:'2:47',
								infonum:{
									index:2,// 0:没操作，1:顶，2:踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10,
								display:true
							}
						]
					},
					{
						index:1,
						list: [
							{
								userpic:'/static/demo/userpic/12.jpg',
								username:'名称',
								isguanzhu:true,
								title:'走出去，才发现你跟别人差的不是一点半点',
								type:'video', // img:图文，video:视频
								titlepic:'/static/demo/datapic/11.jpg',
								paynum:'20w',
								long:'2:47',
								infonum:{
									index:0,// 0:没操作，1:顶，2:踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10,
								display:true
							},
							{
								userpic:'/static/demo/userpic/12.jpg',
								username:'名称',
								isguanzhu:true,
								title:'走出去，才发现你跟别人差的不是一点半点',
								type:'video', // img:图文，video:视频
								titlepic:'/static/demo/datapic/11.jpg',
								paynum:'20w',
								long:'2:47',
								infonum:{
									index:0,// 0:没操作，1:顶，2:踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10,
								display:true
							},
						],
					},
					{
						index:2,
						list: [
							{
								userpic:'/static/demo/userpic/12.jpg',
								username:'名称',
								isguanzhu:true,
								title:'走出去，才发现你跟别人差的不是一点半点',
								type:'video', // img:图文，video:视频
								titlepic:'/static/demo/datapic/11.jpg',
								paynum:'20w',
								long:'2:47',
								infonum:{
									index:0,// 0:没操作，1:顶，2:踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10,
								display:true
							}
						],
					},
					{
						index:3,
						list:{}
					},
					{
						index:4,
						list:{}
					},
					{
						index:5,
						list:{}
					}
				]
			}
		},
		mounted() {
			console.log(uni.getSystemInfoSync())
			setTimeout(()=>{
				this.contentHeight()
			},10)
		},
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:'../search/search',
				animationType: 'pop-in',
			})
		},
		onShow() {
			this.show=true
			setTimeout(()=>{
				this.show=false
			},1000)
		},
		methods:{
			swiperChange(e){
				this.TabIndex=e.detail.current
			},
			// 上拉加载更多
			loadmore(index){
				// loadText : 上拉加载更多/加载中/没有更多
				if(this.loadText!=='上拉加载更多'){
					return
				}
				this.loadText='加载中'
				setTimeout(()=>{
					let obj ={
								userpic:'/static/demo/userpic/12.jpg',
								username:'名称',
								isguanzhu:true,
								title:'走出去，才发现你跟别人差的不是一点半点',
								type:'video', // img:图文，video:视频
								titlepic:'/static/demo/datapic/11.jpg',
								paynum:'20w',
								long:'2:47',
								infonum:{
									index:0,// 0:没操作，1:顶，2:踩
									dingnum:11,
									cainum:11
								},
								commentnum:10,
								sharenum:10,
								display:true
							}
					this.newsList[index].list.push(obj)
					this.loadText='上拉加载更多'
				},3000)
				
				// 没有更多数据
			},
			contentHeight(){
				const query = uni.createSelectorQuery().select('.tab');
				query.boundingClientRect(data => {
				  let height = uni.getSystemInfoSync().windowHeight;
				  this.swiperHeight=height-data.height
				  // console.log( uni.getSystemInfoSync().windowHeight)
				}).exec();
			},
			// 点击签到 或者 发布糗事
			onNavigationBarButtonTap(e){
				if(e.index===1){
					// 点击发布
					uni.navigateTo({
						url:'../app-input/app-input'
					})
				}
				
			},
			delet(listIndex,itemIndex){
				this.newsList[listIndex].list[itemIndex].display=false
			}
		},
		components:{
			item,
			tab,
			loadfooter
		}
	}
</script>

<style>
	.load-more{
		text-align: center;
		color: #aaa;
		padding: 15rpx;
		font-size: 20rpx;
	}
	.nothing{
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.nothing image{
		width: 40%;
	}
	.flos{
		position: fixed;
		right: 0;
		bottom: 35rpx;
		width: 35rpx;
		height: 35rpx;
		background: #000000;
	}
</style>
